<template>
    <div class="app-container">

        <div class="card-wrap flex-column justify-end card-padding" v-for="(fitem, findex) in form.purchaseInfoList" :key="findex">

            <div class="card-title-wrap">
                <span>序号{{ findex + 1 }}</span>
                <span></span>
            </div>

            <el-descriptions title="">

                <el-descriptions-item label="品牌名称">{{ fitem.brandName||'' }}/{{ fitem.seriesName||'' }}/{{ fitem.modelName||'' }}</el-descriptions-item>
                <el-descriptions-item label="配置">{{ fitem.config|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="外观颜色">{{ fitem.exteriorColor|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="内饰颜色">{{ fitem.interiorColor|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="座位数">{{ fitem.seatNum|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="采购数量">{{ fitem.purchaseNum|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="指导价">{{ fitem.guidancePrice|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="采购单价">{{ fitem.purchasePrice|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="采购总价">{{ fitem.purchaseTotalPrice|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="折扣率">{{ fitem.discountRate|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="车辆性质">
                    <dict-tag
                        :options="dict.type.car_nature"
                        :value="fitem.carNature"/>
                </el-descriptions-item>
                <el-descriptions-item label="新车/旧车">
                    <dict-tag
                        :options="dict.type.car_classification"
                        :value="fitem.carClassification"/>
                </el-descriptions-item>
                <el-descriptions-item label="供应商名称">
                    {{getSupplier(fitem.supplierName)}}
<!--                    <dict-tag-->
<!--                        :options="supplierList"-->
<!--                        :value="fitem.supplierName"/>-->
                </el-descriptions-item>
                <el-descriptions-item label="账户">{{ fitem.account|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="采购类型">
                    <dict-tag
                        :options="dict.type.purchase_type"
                        :value="fitem.purchaseType"/>
                </el-descriptions-item>
                <el-descriptions-item label="定金">
                    <dict-tag
                        :options="dict.type.deposit"
                        :value="fitem.deposit"/>
                </el-descriptions-item>
                <el-descriptions-item v-if="1==fitem.deposit" label="定金金额">{{ fitem.depositPrice|filterNull }}</el-descriptions-item>
                <el-descriptions-item v-if="1==fitem.deposit" label="余额金额">{{ fitem.balancePrice|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="企划计划支付日期">{{ fitem.planPayDate|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{ fitem.remark|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="购置税">{{ fitem.purchaseTax|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="上牌费">{{ fitem.registrationFee|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="出库费">{{ fitem.outboundFee|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="物流费">{{ fitem.logisticsFee|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="其他加装费">{{ fitem.retrofittingFee|filterNull }}</el-descriptions-item>

            </el-descriptions>

        </div>


        <div class="card-wrap flex-column justify-end card-padding">

            <div class="card-title-wrap">·
                <span>附件信息</span>
                <span></span>
            </div>

            <el-descriptions title="">

                <el-descriptions-item label="附件">
                    <div class="flex">
                        <ImageCommon disabled v-model="form.attachment"></ImageCommon>
<!--                        <FilePreview :fileList="getUrl(form.attachment)"></FilePreview>-->
                    </div>
                </el-descriptions-item>

                <el-descriptions-item label="审批附言">{{ form.approvalPostscript|filterNull }}</el-descriptions-item>

            </el-descriptions>

        </div>

        <!--    <div class="card-wrap flex justify-end card-padding">-->
        <!--      <el-button @click="cancel">取消</el-button>-->
        <!--      <el-button :loading="buttonLoading" type="primary" @click="submitForm">保存</el-button>-->
        <!--    </div>-->

    </div>
</template>

<script>


import {purchaseDetail} from "@/api/purchaseManage/purchaseList";
import FilePreview from "@/components/FilePreview/index.vue";
import {supplierList} from "@/api/memberManage/vendorList";

export default {
    name:"PurchaseDetail",
    components: {FilePreview},
    dicts: ['car_nature','car_classification', 'purchase_type', 'deposit'],
    data() {
        return {
            buttonLoading: false,
            form: {},
            supplierList: [],
        };
    },
    watch:{
        // '$route':{
        //     handler(val){
        //         console.log('this.$route', this.$route)
        //
        //         if(val && val.name==this.$options.name){
        //             if (this.$route.query && this.$route.query.purchaseOrderId && !this.$route.query.tabClick) {
        //                 this.getOldData(this.$route.query.purchaseOrderId)
        //             }
        //             else if(!this.$route.query.tabClick){
        //                 this.form = {}
        //             }
        //             this.getSupplierList()
        //         }
        //     },
        //     immediate:true,
        //     deep:true
        // }
    },
    created() {
        this.getOldData(this.$route.query.purchaseOrderId)
        this.getSupplierList()
    },
    methods: {
        getSupplier(code){
            return this.supplierList.find(item=>item.supplierId==code)?.supplierName??'--'
        },
        getSupplierList() {
            supplierList({pageNum: 1, pageSize: 100000}).then(res => {
                if (res.code == "200") {
                    const {rows, total} = res
                    this.supplierList = rows
                }
            });
        },
        cancel() {

        },
        submitForm() {

        },
        getOldData(purchaseOrderId) {
            purchaseDetail(purchaseOrderId).then(res => {
                this.form = res.data
            })
        },

        getUrl(ossid){
            ossid = String(ossid)
            if(ossid && ossid.indexOf(",") != -1){
                let split = ossid.split(",");

                let res = this.form.ossVos.filter(item=>{
                    for (let splitElement of split) {
                        if(item.ossId == splitElement){
                            return item
                        }
                    }

                }).map(item=>{
                    return item.url
                })
                console.log('aaa', res)
                return res

            }else {
                if(this.form.ossVos && this.form.ossVos.length){
                    return this.form.ossVos.find(item=>{
                        if(item.ossId == ossid){
                            return item
                        }
                    })?.url
                }
            }
        },
    }
};
</script>


<style lang="scss" scoped>


</style>
